<template>
  <div class="h-full pb-60 m-relative boc">
    <div class="p-20 h-full overflow-y-auto">
      <div class="flex flex-a-c">
        <div>
          <span class="text-red">比例更新为</span>
          <div class="round-10 flex-col bgccc p-20 mt-m">
            <div class="flex flex-a-c">
              <span class="text000"> 基础自购比例：</span>
              <span class="text-red ml-14">{{ props.params.form.baseRate }}%</span>
            </div>
            <div class="flex flex-a-c my-30">
              <span class="text000"> 提成比例：</span>
              <span class="text-red ml-14">{{ props.params.form.commissionRate }}%</span>
            </div>
            <div class="flex flex-a-c">
              <span class="text000"> 渠道方{{ userStore.userInfo.rewardChannelStr }}比例：</span>
              <span class="text-red ml-14"
                >{{ 100 - props.params.form.baseRate - props.params.form.commissionRate }}%</span
              >
            </div>
          </div>
        </div>
        <icon-arrow-left :size="40" class="mx-40" />
        <div>
          <span>原比例</span>
          <div class="round-10 flex-col borderccc p-20 mt-m">
            <div class="flex flex-a-c">
              <span class="text000"> 基础自购比例：</span>
              <span class="text-red ml-14">{{ props.params.userInfoData.baseRate }}%</span>
            </div>
            <div class="flex flex-a-c my-30">
              <span class="text000"> 提成比例：</span>
              <span class="text-red ml-14">{{ props.params.userInfoData.commissionRate }}%</span>
            </div>
            <div class="flex flex-a-c">
              <span class="text000"> 渠道方{{ userStore.userInfo.rewardChannelStr }}比例：</span>
              <span class="text-red ml-14"
                >{{ 100 - props.params.userInfoData.baseRate - props.params.userInfoData.commissionRate }}%</span
              >
            </div>
          </div>
        </div>
      </div>
      <a-form :model="form" class="mt-20" size="medium" auto-label-width label-align="left">
        <a-form-item label="手机号：">
          <div class="flex-col">
            {{ form.mobile }}
          </div>
        </a-form-item>
        <a-form-item label="验证码：">
          <a-input placeholder="验证码" v-model="form.code" class="w-40n mr-10"> </a-input>
          <a-button @click="handleChannelIncomeSendCode" :disabled="codeDisabled">{{ codeStr }}</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="m-absolute border-box b-0 l-0 r-0 h-60 flex flex-a-c bt-f0 px-20 flex-j-e">
      <a-space>
        <a-button @click="onClose(0)">取消</a-button>
        <a-button type="primary" :loading="loading" @click="onOk">确定</a-button>
      </a-space>
    </div>
  </div>
</template>

<script setup>
import { channelIncomeSendCode, channelIncomeEdit } from '@/apis'
import { Message } from '@arco-design/web-vue'
import { reAssign } from '@/utils/common'
import $bus from '@/utils/bus'
import { useUserStore } from '@/store'
const userStore = useUserStore()
const props = defineProps(['params', 'onClose'])
const codeStr = ref('获取验证码')
const loading = ref(false)
const codeDisabled = ref(false)
const form = reactive({
  baseRate: undefined,
  commissionRate: undefined,
  mobile: undefined,
  code: undefined
})

reAssign(form, props.params.form)
form.mobile = props.params.userInfoData.contactPhone
const handleChannelIncomeSendCode = async () => {
  codeDisabled.value = true
  try {
    await channelIncomeSendCode({
      mobile: form.mobile
    })
    Message.success('验证码已发送')
    let count = 60
    const timer = setInterval(() => {
      count--
      codeStr.value = `${count}秒后可重试`
      if (count === 0) {
        clearInterval(timer)
        codeStr.value = '获取验证码'
        codeDisabled.value = false
      }
    }, 1000)
  } catch (error) {
    codeDisabled.value = false
  }
}

// 点击确认添加/编辑
const onOk = async () => {
  try {
    loading.value = true
    if (!form.code) return Message.error('验证码不能为空')
    await channelIncomeEdit(form)
    Message.success('修改成功')
    $bus.emit('getChannelIncomeDetail')
    props.onClose()
  } finally {
    loading.value = false
  }
}
</script>
<style scoped lang="scss">
.bgccc {
  background: #eee;
}
.borderccc {
  border: 1px solid #eee;
}
.boc {
  :deep(.arco-input-outer) {
    border-radius: 4px !important;
  }
}
</style>
